<template>
  <el-drawer v-model="model" append-to-body>
    <template #header>「{{ props.title }}」枚举值</template>
    <div class="export">
      <el-button size="small" link @click="handleExport">导出</el-button>
    </div>
    <el-table class="merak-table-container" v-loading="state.loading" max-height="calc(100vh - 140px)" :data="state.data">
      <el-table-column
        prop="propvalue_id"
        :label="$t(`goods_attribute.${props.tab === TabType.clearance ? 'cc_' : ''}prop_id`)"
      />
      <el-table-column
        prop="propvalue_cn"
        :label="$t(`goods_attribute.${props.tab === TabType.clearance ? 'cc_' : ''}property_cn`)"
      />
      <el-table-column
        prop="propvalue"
        :label="$t(`goods_attribute.${props.tab === TabType.clearance ? 'cc_' : ''}property`)"
      />
      <template #empty>
        <div v-if="state.loadedData" style="padding: 100px 40px 0">
          <img :src="EmptyPng" style="object-fit: cover; height: 130px" />
        </div>
      </template>
    </el-table>
  </el-drawer>
</template>

<script setup lang="ts">
import { reactive, watchEffect } from "vue";

import { useDefaultStore } from "@/stores/modules/default";

import { ElMessage, ElDrawer, ElButton, ElTable, ElTableColumn } from "element-plus";

import { ResultEnum } from "@/enums/httpEnum";
import { exportTableApi } from "@/api/modules/table";
import { RouteType, TabType, AttributeType, getAttributeList } from "@/api/modules/goodsArchive/allocation";

import EmptyPng from "@/assets/images/empty.png";

export interface EnumPropsType {
  propId: string | number;
  typeId: string | number;
  title: string;
}

const props = defineProps<Partial<EnumPropsType> & { type: RouteType; tab: TabType }>();

const model = defineModel<boolean>({ default: false });

const defaultStore = useDefaultStore();

const state = reactive<{
  loading: boolean;
  loadedData: boolean;
  tableId?: string;
  data: AttributeType[];
}>({
  loading: false,
  loadedData: false,
  data: []
});

const handleExport = () => {
  if (typeof props.propId === "undefined" || typeof props.typeId === "undefined") return;
  // 关闭下载列表
  defaultStore.downVisable = false;
  exportTableApi({
    table_id: state.tableId,
    route_name: `${props.title}枚举值`,
    route_condition: { prop_id: props.propId, type_id: props.typeId }
  }).then(({ code, message }) => {
    if (code == ResultEnum.SUCCESS) {
      model.value = false;
      defaultStore.downVisable = true;
    } else {
      const msg = typeof message === "string" ? message : Object.values(message)?.[0];
      ElMessage.error(msg);
    }
  });
};

watchEffect(async () => {
  if (typeof props.propId === "undefined" || typeof props.typeId === "undefined") return;
  state.loadedData = false;
  state.loading = true;
  await getAttributeList[props.tab](props.type, props.propId, props.typeId).then(({ code, data }) => {
    if (code == ResultEnum.SUCCESS) {
      state.tableId = data.table_id;
      state.data = data.table_data.list;
    }
  });
  state.loading = false;
  state.loadedData = true;
});
</script>

<style scoped lang="scss">
.export {
  margin-bottom: var(--merak-space);
  text-align: right;
  .el-button {
    padding: 0;
    min-width: auto;
    &:hover,
    &:focus {
      color: var(--el-color-primary) !important;
    }
  }
}
.merak-table-container :deep(.el-scrollbar) {
  margin: 0 !important;
  padding: 0 !important;
}
</style>
